import { useState, useEffect } from "react";
import "./index.less";
import { Modal } from 'antd';
import { request } from "../../../../../../../common/request";
import { urls } from "../../../../../../../common/urls";

function UploadApp() {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [uploadInfo, setUploadInfo] = useState({} as any);
  const [state, setState] = useState(false);

  const handleBtn = () => {
    setIsModalOpen(true);
  };

  const handleOk = () => {
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    setIsModalOpen(false);
  };

  const getUploadAppInfo = () => {
    request({
      method: "post",
      data: {
        method: urls.getUploadAppInfo,
        version: '1.1.0',
        platform_type: 1
      },
    }).then((res: any) => {
      setState(true);
      setUploadInfo({
        tips: res.msg,
        version: res.data.version,
        content: res.data.content,
        url: res.data.url,
      });
    }).catch((err) => {
      setState(false);
      setUploadInfo({
        tips: err
      });
    });
    handleBtn();
  };

  return (
    <>
      <div className="uploadApp-page text-style">
        <div className="uploadApp-page-btn" onClick={ getUploadAppInfo }>检查更新</div>
      </div>
      <Modal
        open={ isModalOpen }
        onOk={ handleOk }
        onCancel={ handleCancel }
        okText="确认"
        cancelText="取消"
        centered
      >
        {
          state ? 
          <div className="uploadApp-dialog text-style">
            <div className="uploadApp-dialog-title">{ uploadInfo.tips }</div>
            <div className="uploadApp-dialog-content">{ uploadInfo.content }</div>
            <div className="uploadApp-dialog-url">更新连接：{ uploadInfo.url }</div>
          </div> :
          <div className="uploadApp-err-tips text-style">{ uploadInfo.tips }</div>
        }
      </Modal>
    </>
  );
}

export default UploadApp;
